<script setup lang="ts">
import { reactive } from "vue"
import { Login } from "../api/server"
import type { AxiosResponse } from "axios";
import { useRouter } from "vue-router";
import { showToast } from 'vant';

//新建Account接⼝约束登录参数
export interface Account {
	username: string
	password: string
}

const router = useRouter()

const form = reactive<Account>({
    username: 'admin',
    password: '123456'
})
const onSubmit = async () => {
    let res: AxiosResponse = await Login(form)
    if (res.data.code === 200) {
        localStorage.setItem('nickname',res.data.data.nick)
        showToast({
            message:'登录成功',
            duration: 500,
        });
        await setTimeout(() => {
            router.back()
        }, 1000);  
    }
}
</script>

<template>
    <van-nav-bar title="登录"  left-text="返回" left-arrow @click-left="router.back()"/>
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field v-model="form.username" name="username" label="用户名" placeholder="请填写用户名"
                :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field v-model="form.password" type="password" name="password" label="密码" placeholder="请填写密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
				提交
            </van-button>
        </div>
    </van-form>
</template>

<style scoped></style>